<template>
  <div>
    <!-- 图片类型nav栏 -->
    <van-tabs v-model="activeName" @click="tabClick">
      <van-tab v-for="item in photoCateList" :key="item.id" :title="item.title" :name="item.id"></van-tab>
    </van-tabs>

    <!-- 图片列表 -->
    <ul class="img-list">
      <li v-for="item in photoList" :key="item.id" @click="imgBoxClick(item.id)">
        <van-image width="100%" height="300" :src="item.img_url" />
        <div class="img-info">
          <p>{{ item.title }}</p>
          <p>{{ item.zhaiyao }}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: 0,
      photoCateList: [],
      photoList: []
    }
  },
  created() {
    this.getPhotoCateList()
    this.getPhotoList(0)
  },
  methods: {
    async getPhotoCateList() {
      const { data: res } = await this.$http.get('/api/getimgcategory')
      this.photoCateList = res.message
      this.photoCateList.unshift({ title: '全部', id: 0 })
      console.log(this.photoCateList)
    },
    async getPhotoList(id) {
      const { data: res } = await this.$http.get(`/api/getimages/${id}`)
      this.photoList = res.message
      console.log(this.photoList)
    },
    tabClick(name, title) {
      console.log(name, title)
      this.getPhotoList(name)
    },
    imgBoxClick(id) {
      console.log(id)
      this.$router.push(`/photo/Info/${id}`)
    }
  }
}
</script>

<style lang="less" scoped>
.img-list {
  padding: 0 10px;
  li {
    position: relative;
    overflow: hidden;
    margin: 10px 0;
    border-radius: 5px;
    height: 300px;
    .img-info {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 80px;
      background-color: rgba(0, 0, 0, 0.4);
      color: #fff;
      padding: 0 10px;
      p {
        font-size: 12px;
        margin: 5px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        overflow: hidden;
      }
    }
  }
}
</style>
